<template>
	<view>
		<view class="pay-mode">
			<view class="pay-title">
				<text>支付方式</text>
				<text style="color: royalblue;font-size: 26rpx;" @click="toBind">已有会员卡，点击绑定</text>
			</view>

			<view class="mode-item">
				<view class="mode-left">
					<view>
						<u-icon name="star-fill" size="60rpx" color="royalblue" />
					</view>
					<view class="left-text">
						<text>影城会员卡</text>
						<text style="color:royalblue">即开即用，会员购票享优惠！！</text>
					</view>
				</view>
				<view class="select-icon" @click="showSelectCard">
					<view style="font-size: 26rpx;color: #999;display: flex;">
						<text style="color: royalblue;">{{cardList.length?cardText:'立即开卡'}}</text>
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view>
			<view class="mode-item" @click="wxClick">
				<view class="mode-left">
					<view>
						<u-icon name="weixin-fill" size="60rpx" color=" #00e600" />
					</view>
					<view class="left-text">
						<text>微信支付</text>
						<text>应付款￥{{wxPayMoney}}</text>
					</view>
				</view>
				<view class="select-icon">
					<u-icon name="checkmark-circle-fill" size="50rpx" :color="payMode=='wx'?'royalblue':'#999'" />
				</view>
			</view>
			<view class="mode-item" @click="douyinClick">
				<view class="mode-left">
					<view>
						<image src="../../static/image/douyin.png" mode="widthFix" style="width: 60rpx;"></image>
					</view>
					<view class="left-text">
						<text>抖音兑换券</text>
						<text>使用抖音兑换券购买影票</text>
					</view>
				</view>
				<view class="select-icon">
					<u-icon name="checkmark-circle-fill" size="50rpx" :color="payMode=='douyin'?'royalblue':'#999'" />
				</view>
			</view>
			<view class="mode-item">
				<view class="mode-left">
					<view>
						<u-icon name="coupon-fill" size="60rpx" color="#DD524D" />
					</view>
					<view class="left-text">
						<text>优惠券</text>
						<text style="color:#DD524D;">使用优惠券购买影票更优惠</text>
					</view>
				</view>
				<view class="select-icon" @click="selectCoupon">
					<view style="font-size: 26rpx;color: #DD524D;display: flex;">
						<text>{{payMode==='coupons'?`已选${selectedCoupons.length}张`:'选择优惠券'}}</text>
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view>


		</view>
		<u-popup :show="showCard" @touchmove.stop.prevent="moveStop" @click-overlay="showCard=false">
			<view class="select-card-list" v-for="item in cardList" :key="item.cardCode">
				<view class="select-card" @click="slectedCard(item.cardCode,item.balance)">
					<text>{{item.memberPolicy}}</text>
					<text>卡号：{{item.cardCode}}</text>
					<!-- <text>余额：{{item.balance}}元</text> -->
				</view>
			</view>
		</u-popup>
		<u-popup mode='center' :show="showPassword" @click-overlay="showPassword=false">
			<view class="input-password">
				<u--input label="密码" password type="number" :model:value="cardPayParams.password" @change="change"
					placeholder="请输入密码" :border="false" />
				<u-button shape="circle" :disabled="!canCardPay" @click="getCard"
					custom-style="margin-top:30rpx;width:60vw;height:60rpx;">
					确定</u-button>
			</view>
		</u-popup>
		<u-popup mode='center' :show="showDouyin" @click-overlay="showDouyin=false">
			<view class="input-password">
				<u--input label="兑换券码" password type="number" :model:value="douyinCouponPayForm.code"
					@change="changeDouyinCode" placeholder="请输入兑换券码" :border="false" />
				<u-button shape="circle" :disabled="!canCardPay" @click="douyinCouponPay"
					custom-style="margin-top:30rpx;width:60vw;height:60rpx;">
					确定</u-button>
			</view>
		</u-popup>
		<!-- showCoupon -->
		<u-popup :show="showCoupon" @click-overlay="showCoupon=false" custom-style="height: 50vh;"
			@touchmove.stop.prevent="moveStop">
			<view class="coupon-popup">
				<view class="title">优惠券</view>
				<view class="coupon-list">
					<view
						:class="selectedCoupons.indexOf(item.couponCheckCode)==-1?'list-item':'list-item list-item-select'"
						style="height: 150rpx;" v-for="(item,index) in couponList" :key="index"
						@click="selectCouponFn(item.couponCheckCode,1,item.orderCode)">
						<text>{{item.policyName}}</text>
						<text>有效期至:</text>
						<text>{{item.useEndDate}}</text>
					</view>
				</view>

				<view style="position: fixed;bottom: 20rpx;width: 90%;">
					<u-button shape="circle" :disabled="!canCardPay" @click='couponPay'
						color="linear-gradient(to right, #99d6ff, #008ae6)" size="large">
						优惠券支付
					</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showGiveCoupon" @click-overlay="showGiveCoupon=false" custom-style="height: 50vh;"
			@touchmove.stop.prevent="moveStop">
			<view class="coupon-popup">
				<view class="title">会员兑换券</view>
				<view style="text-align: center;font-size: 24rpx;color: #999;margin-bottom: 20rpx;">
					若券过多只显示前20张
				</view>
				<view class="coupon-list">
					<view :class="selectedCoupons.indexOf(item.checkCode)==-1?'list-item':'list-item list-item-select'"
						v-for="(item,index) in giveCouponList" :key="index"
						:style="{opacity:checkCouponDate(item.realStartDate,item.realEndDate)?'1':'0.4'}"
						@click="selectCouponFn(item.checkCode,2,item.hallCode,checkCouponDate(item.realStartDate,item.realEndDate))">
						<text>{{item.giveCouponPolicyName}}</text>
						<text>{{item.realStartDate}}</text>
						<text>至</text>
						<text>{{item.realEndDate}}</text>
					</view>
				</view>
				<view style="position: fixed;bottom: 20rpx;width: 90%;">
					<u-button shape="circle" :disabled="!canCardPay" @click='giveCouponPay'
						color="linear-gradient(to right, #99d6ff, #008ae6)" size="large">兑换券支付
					</u-button>
				</view>
			</view>
		</u-popup>
		<couponTip :showCouponTips='showCouponTips' :hallCode='hallCode'></couponTip>
		<view class="pay">
			<view class="pay-money">
				<text>应付:</text>
				<text class="total-price">￥ {{payMode==='card'?cardPayMoney:wxPayMoney}}</text>
				<text
					style="font-size: 20rpx;line-height: 60rpx;">(含服务费{{payMode==='card'?cardServiceFee:channelFee}}元)</text>
			</view>
			<view class="">
				<u-button shape="circle" @click='pay' :disabled="!canCardPay"
					color="linear-gradient(to right, #99d6ff, #008ae6)" size="large">立即支付
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wxPay,
		getCardList,
		queryCouponList,
		queryGiveCouponList,
		getMemberPrice,
		payByMemberCard,
		releaseSeat,
		payByCoupons,
		payByGiveCoupons,
		getCardInfo,
		goodsList,
		douyinPayApi
	} from '../../common/http/api.js'
	import {
		checkPhone
	} from '../../common/formCheck.js'

	import couponTip from '../common/couponTip.vue'
	import moment from 'moment';
	export default {
		props: ["channelOrderCode", "orderCode", "isRelease", 'enterNum'],
		components: {
			couponTip
		},
		data() {
			return {
				payParams: {
					orderNo: '',
					openId: uni.getStorageSync("openId"),
					orderPhone: '',
				},
				orderData: {},
				wxPayMoney: '',
				balance: "",
				cardPayMoney: '',
				cardServiceFee: 0,
				cardList: [],
				couponList: [],
				giveCouponList: [],
				isWxPay: true,
				cardText: '请选择会员卡',
				showCard: false,
				showCoupon: false,
				showGiveCoupon: false,
				showPassword: false,
				showCouponTips: false,
				hallCode: '',
				payMode: 'wx',
				getMemberPriceParams: {
					orderNo: '',
					cardCode: ''
				},
				cardPayParams: {
					openId: uni.getStorageSync("openId"),
					orderNo: '',
					password: "",
					orderPhone: '',
					cardCode: "",
					orders: [],
				},
				releaseSeatParams: {
					Count: '',
					OrderCode: '',
					SessionCode: '',
					Seat: []
				},
				couponPayForm: {
					openId: uni.getStorageSync("openId"),
					coupons: "",
					orderNo: '',
					lowestPrice: '',
					orderTotal: '',
					orderPhone: '',
				},
				douyinCouponPayForm: {
					openId: uni.getStorageSync("openId"),
					code: "",
					orderNo: '',
					lowestPrice: '',
					orderTotal: '',
					orderPhone: '',
					filmCode: '',
					hallCode: ''
				},
				isPay: false,
				selectedCoupons: [],
				getCardParams: {
					cardCode: '',
					password: ''
				},
				canCardPay: true,
				screenCode: '',
				channelFee: 0,
				isCouponTy: false,
				showDouyin: false
			};
		},
		methods: {
			moveStop() {},
			change(e) {
				this.cardPayParams.password = e.detail
				this.getCardParams.password = e.detail
			},
			changeDouyinCode(e) {
				this.douyinCouponPayForm.code = e.detail
			},
			inputPassword(e) {
				this.cardPayParams.password = e.detail
			},
			wxClick() {
				this.selectedCoupons = []
				this.payMode = 'wx'
				this.isWxPay = false
				this.cardServiceFee = 0
			},
			douyinClick() {
				uni.showModal({
					title: "请确认",
					content: "支付后若退票无法退还抖音兑换券，请您知晓!",
					success: res => {
						if (res.confirm) this.payMode = 'douyin'

					}
				})
			},
			pay() {
				if (this.payMode === 'wx') this.wxPay()
				else if (this.payMode === 'card') this.showPassword = true
				else if (this.payMode == 'coupon') this.couponPay()
				else if (this.payMode == 'giveCoupon') this.giveCouponPay()
				else if (this.payMode == 'douyin') this.showDouyin = true
			},
			goodsModal() {
				goodsList().then(res => {
					if (res.data.length) {
						uni.showModal({
							title: "支付成功",
							content: "是否前往购买商品",
							confirmText: "是",
							cancelText: "否",
							success: res => {
								if (res.confirm) {
									uni.switchTab({
										url: '../../pages/goods/goods'
									})
								} else {
									uni.redirectTo({
										url: '../../pages/orderPage/orderPage?orderCode=' +
											this.orderCode + '&statusText=待取票'
									})
								}
							}
						})
					} else {
						uni.redirectTo({
							url: '../../pages/orderPage/orderPage?orderCode=' +
								this.orderCode + '&statusText=待取票'
						})
					}
				})
			},
			//拉起微信支付
			wxPay() {
				this.canCardPay = false
				this.payParams.orderNo = this.channelOrderCode;
				wxPay(this.payParams).then(res => {
					const {
						data,
						code
					} = res
					if (code === "SUCCESS") {
						uni.requestPayment({
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							appId: data.appId,
							success: res => {
								if (res.errMsg === "requestPayment:ok") {
									this.isPay = true
									this.goodsModal()
								}

							},
							fail: err => {
								releaseSeat(this.releaseSeatParams);
								uni.navigateBack({
									delta: 1,
									fail: e => {
										console.log(e);
									}
								});
							}
						})
					}

				})
			},
			//查询会员卡
			queryCard() {
				getCardList(uni.getStorageSync("openId")).then(res => {
					const {
						code,
						data
					} = res
					if (code === "000") {
						this.cardList = data
					}
				})
			},
			getCard() {
				this.canCardPay = false;
				//获取会员卡信息
				getCardInfo(this.getCardParams).then(res => {
					const {
						data,
						code,
						msg
					} = res
					if (code === '000') {
						this.balance = data.balance
						if (parseFloat(this.balance) < parseFloat(this.cardPayMoney)) {

							uni.showModal({
								confirmText: '立即充值',
								title: '会员卡余额不足，请充值',
								success: showResult => {
									if (showResult.confirm) {
										uni.navigateTo({
											url: "../cardPage/cardPage?cardCode=" + this
												.getCardParams.cardCode + '&password=' +
												this.getCardParams.password
										})
									}
								}
							})
							setTimeout(() => {
								this.canCardPay = true;
							}, 2000)
							this.cardList.find((item) => {
								if (item.cardCode == this.getCardParams.cardCode) {
									item.balance = this.balance
								}
							})
						} else {
							this.cardPay();
						}
					} else {
						uni.showToast({
							title: msg,
							icon: "none"
						})
						this.canCardPay = true;
					}

				})
			},
			//查询优惠券
			queryCoupon() {
				queryCouponList(uni.getStorageSync("openId")).then(res => {
					const {
						code,
						obj
					} = res
					if (code === '000') {
						obj.map(item => {
							if (item.flag === '1') {
								this.couponList.push(item);
							}
						})

					}
				})

			},
			queryGiveCoupon(cardCode) {
				queryGiveCouponList({
					cardCode
				}).then(res => {
					const {
						code,
						obj
					} = res
					if (code === '000') {
						this.giveCouponList = obj.slice(0, 20)
						this.giveCouponList.sort((a, b) => {
							return this.checkCouponDate(b.realStartDate, b.realEndDate) - this
								.checkCouponDate(a.realStartDate, a.realEndDate)
						})
						if (this.giveCouponList.length) {
							uni.showModal({
								title: "请选择会员卡支付方式",
								cancelText: '会员余额',
								confirmText: '兑换券',
								success: res => {
									if (res.confirm) {
										this.payMode = 'giveCoupon'
										this.couponPayForm.orderNo = this.channelOrderCode
										this.couponModal(2)
										this.cardServiceFee = 0
										this.showPassword = false
									} else {
										this.payMode = 'card'
										this.showPassword = true
									}
								}
							})
						}
					}
				})
			},
			douyinCouponPay() {
				this.canCardPay = false;
				this.douyinCouponPayForm.orderNo = this.channelOrderCode
				douyinPayApi(this.douyinCouponPayForm).then(res => {
					const {
						code,
						msg
					} = res
					if (code == 'SUCCESS') {
						this.isPay = true
						uni.showToast({
							title: msg,
							icon: "none",
							duration: 1500
						})
						setTimeout(() => {
							this.goodsModal()
						}, 1500)
					} else {
						uni.showToast({
							title: msg,
							icon: "none",
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
						this.canCardPay = true
					}

				})
			},
			//展示选择优惠券
			selectCoupon() {

				this.couponPayForm.orderNo = this.channelOrderCode
				this.payMode = 'coupons'
				this.couponModal(1)
			},
			//展示选择会员卡
			showSelectCard() {
				if (this.cardList.length) {
					this.showCard = true
				} else {
					uni.redirectTo({
						url: "../../pages/openCard/openCardList"
					})
				}
			},
			//获取会员价
			slectedCard(cardCode, balance) {
				this.cardServiceFee = 0
				this.balance = balance
				this.getCardParams.cardCode = cardCode
				this.getMemberPriceParams.cardCode = cardCode
				this.cardPayParams.cardCode = cardCode
				this.cardPayParams.orderNo = this.channelOrderCode
				this.getMemberPriceParams.orderNo = this.channelOrderCode
				this.showCard = false
				this.isWxPay = false
				this.payMode = 'card'
				const code = cardCode.slice(-3)
				this.cardText = `已选择***${code}`
				getMemberPrice(this.getMemberPriceParams).then(res => {
					console.log(res)
					const {
						code,
						data
					} = res
					if (code === "SUCCESS") {
						this.cardPayMoney = data.totalSales.toFixed(2)
						let orders = []
						data.data.map(item => {
							this.cardServiceFee += item.serviceFee
							if (item.lowestPrice) {
								orders.push({
									sessionCode: item.sessionCode,
									seatCode: item.seatCode,
									memberPrice: item.memberPrice,
									serviceFee: item.serviceFee
								});
							}

						})
						this.cardPayParams.orders = orders;
					} else {
						uni.showToast({
							title: "查询会员卡价格失败",
							icon: 'none'
						})
					}
				})
				this.queryGiveCoupon(cardCode);
			},
			couponModal(type) {
				uni.showModal({
					title: "温馨提示",
					content: '支付后若退票无法退换券，请您知晓！',
					success: res => {
						if (res.confirm) {
							if (type == 1) this.showCoupon = true;
							else this.showGiveCoupon = true
						}
					}
				})
			},
			cardPay() {
				payByMemberCard(this.cardPayParams).then(res => {
					const {
						code,
						msg
					} = res;
					if (code === "SUCCESS") {
						this.cardPayParams = {}
						this.isPay = true
						uni.showToast({
							title: '支付成功',
							icon: "none",
							duration: 1500
						})
						setTimeout(() => {
							this.goodsModal()
						}, 1500)
					} else {
						uni.showToast({
							title: msg,
							icon: "none"
						})

						this.canCardPay = true;
					}
				})
			},
			selectCouponFn(couponId, type, hallCode, canUse) {
				if (hallCode && type == '2') {
					if (!canUse) {
						uni.showToast({
							title: "未到使用时间",
							icon: "none"
						})
						return
					}
					this.hallCode = hallCode
					if (hallCode.indexOf(this.screenCode) == -1) {
						uni.showToast({
							title: "当前影厅不可使用该兑换券",
							icon: "none"
						})
						this.showCouponTips = true
						setTimeout(() => {
							this.showCouponTips = false
						}, 3000)
						return
					} else {
						this.showCouponTips = true
						setTimeout(() => {
							this.showCouponTips = false
						}, 3000)
					}


				}
				if (this.selectedCoupons.indexOf(couponId) == -1) {
					if (this.releaseSeatParams.Count == this.selectedCoupons.length) return
					if (type == 2) {
						this.selectedCoupons.push(couponId)
					} else {
						//type == 优惠券
						if (this.selectedCoupons.length == 0) {
							//为0直接push
							this.selectedCoupons.push(couponId)
							this.isCouponTy = hallCode.includes('TY')
						} else {
							//不为0 判断类型
							if (hallCode.includes('TY') == this.isCouponTy) {
								this.selectedCoupons.push(couponId)

							} else {
								uni.showToast({
									title: "无法混合使用，请先选择相同类型优惠券",
									icon: "none"
								})
							}
						}
					}


				} else {
					const index = this.selectedCoupons.indexOf(couponId)
					this.selectedCoupons.splice(index, 1)
				}
				if (this.selectedCoupons.length === 1) this.couponPayForm.coupons = this.selectedCoupons.toString();
				else if (this.selectedCoupons.length > 1) this.couponPayForm.coupons = this.selectedCoupons.join(",");
				if (type == '2') this.cardText = `已选${this.selectedCoupons.length}张兑换券`
			},
			couponPay() {
				if (this.selectedCoupons.length < this.$store.state.sessionSeatList.length) {
					uni.showToast({
						title: "优惠券不足",
						icon: "none"
					})
					return
				}
				payByCoupons({
					...this.couponPayForm,
					type: this.isCouponTy ? 'TY' : ''
				}).then(res => {
					const {
						code,
						msg
					} = res;
					if (code === "SUCCESS") {
						uni.showToast({
							title: msg,
							icon: "none",
							duration: 1500
						})
						this.isPay = true
						setTimeout(() => {
							this.goodsModal()
						}, 1500);
					} else {
						uni.showToast({
							title: msg,
							icon: "none",
							duration: 1500
						})
					}
				})
			},
			giveCouponPay() {
				this.canCardPay = false
				if (this.selectedCoupons.length < this.$store.state.sessionSeatList.length) {
					uni.showToast({
						title: "会员兑换券不足",
						icon: "none"
					})
					this.canCardPay = true
					return
				}

				payByGiveCoupons(this.couponPayForm).then(res => {
					const {
						code,
						msg
					} = res;
					if (code === "SUCCESS") {
						uni.showToast({
							title: msg,
							icon: "none",
							duration: 1500
						})
						this.isPay = true
						setTimeout(() => {
							this.goodsModal()
						}, 1500);
					} else {
						uni.showToast({
							title: msg,
							icon: "none",
							duration: 1500
						})
						this.canCardPay = true
					}
				})
			},
			toBind() {
				// releaseSeat(this.releaseSeatParams)
				uni.navigateTo({
					url: '/pages/bindCard/bindCard'
				})
			}
		},
		created() {
			console.log(this.screenCode);
			this.screenCode = this.$store.state.sessionInfo.ScreenCode;
			this.channelFee = parseFloat((this.$store.state.sessionInfo.channelFee * this.$store.state.sessionSeatList
				.length).toFixed(
				2))
			this.wxPayMoney = parseFloat((this.$store.state.sessionInfo.payPrice * this.$store.state.sessionSeatList
				.length).toFixed(
				2)) + this.channelFee
			this.releaseSeatParams.Count = this.$store.state.sessionSeatList.length
			this.releaseSeatParams.SessionCode = this.$store.state.sessionInfo.PlanCode
			this.releaseSeatParams.Seat = this.$store.state.seatsCode
			// this.queryCard()
			this.cardPayParams.orderPhone = uni.getStorageSync('userPhone')
			//影院券
			this.couponPayForm.lowestPrice = this.$store.state.sessionInfo.couponPrice;
			this.couponPayForm.orderTotal = this.$store.state.sessionInfo.couponPrice * this.releaseSeatParams.Count;
			//抖音券
			this.douyinCouponPayForm.lowestPrice = this.$store.state.sessionInfo.couponPrice;
			this.douyinCouponPayForm.orderTotal = this.$store.state.sessionInfo.couponPrice * this.releaseSeatParams.Count;
			this.douyinCouponPayForm.count = this.releaseSeatParams.Count
			this.douyinCouponPayForm.hallCode = this.screenCode
			this.payParams.orderPhone = uni.getStorageSync('userPhone')
			this.couponPayForm.orderPhone = uni.getStorageSync('userPhone')
			this.douyinCouponPayForm.orderPhone = uni.getStorageSync('userPhone')
			this.douyinCouponPayForm.filmCode = this.$store.state.sessionInfo.filmCode
			// this.queryCoupon()
		},
		watch: {
			selectedCoupons(n) {
				if (n.length != 0) {
					this.isWxPay = false
				}
			},
			isRelease(n) {
				if (n) {
					releaseSeat(this.releaseSeatParams)
				}
			},
			payMode() {
				this.selectedCoupons = []
			},
			enterNum() {
				this.queryCard()
				this.queryCoupon()
			}
		},
		computed: {
			getScreenName() {
				return codes => {
					const {
						screens
					} = this.$store.state

					if (codes) {
						const list = codes.split(',')
						const strArr = []
						// const index = screens.find(item => item.ScreenCode === code)
						list.map(item => {
							screens.map(screen => {
								if (screen.ScreenCode == item) strArr.push(screen.ScreenName)
							})
						})
						return strArr.join('、')
					} else {
						return ''
					}



				}
			},
			checkCouponDate() {
				return (start, end) => {
					return moment().isBetween(start, end)
				}
			}
		},
		beforeDestroy() {
			if (!this.isPay) {
				this.releaseSeatParams.OrderCode = this.orderCode
				releaseSeat(this.releaseSeatParams)
			}
		}
	}
</script>

<style lang="scss">
	@import url(../../common/css/couponStyle.css);

	.custom-class {
		margin-top: 15rpx !important;
	}

	.input-password {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80vw;
		height: 200rpx;
		padding: 30rpx;
	}

	.phone {
		display: flex;
		padding: 20rpx 4vw;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		margin-top: 15rpx;
		font-size: 26rpx;

		input {
			width: 180rpx;
		}
	}

	.pay-mode {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		margin-top: 15rpx;

		.pay-title {
			font-size: 26rpx;
			width: 92vw;
			border-bottom: 1px solid #f0f0f5;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
		}

		.mode-item {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			padding: 15rpx 0;
			width: 92vw;

			.mode-left {
				display: flex;
				align-items: center;


				.left-text {
					display: flex;
					flex-direction: column;
					font-size: 32rpx;
					margin-left: 20rpx;

					text:last-child {
						font-size: 22rpx;
						color: #999;
					}
				}
			}

			.select-icon {
				height: 100%;
				display: flex;
				align-items: center;
			}
		}
	}

	.select-card-list {
		width: 100vw;
		height: 10vh;
		padding-top: 15rpx;

		.select-card {
			display: flex;
			background-color: #fff;
			width: 90vw;
			margin: 0rpx auto 10rpx auto;
			box-shadow: 4px 4px 4px #f0f0f5;
			justify-content: space-between;
			color: #999;
			padding: 30rpx 20rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
		}

	}

	.pay {
		position: fixed;
		bottom: 0;
		width: 92vw;
		padding: 15rpx 4vw 30rpx 4vw;
		background-color: #fff;

		.pay-money {
			font-size: 28rpx;
			display: flex;
			align-items: flex-end;

			text {
				line-height: 70rpx;
			}

			.total-price {
				font-size: 32rpx;
				color: #cc4444;
				font-weight: bold;
			}

			.server-fee {
				margin-left: 5rpx;
				font-size: 22rpx;
				color: #cc4444;
			}
		}
	}

	.coupon-popup {
		padding: 30rpx 50rpx;
		font-size: 28rpx;
		color: #999;

		.title {
			text-align: center;
			color: #333;
			margin-bottom: 10rpx;
		}

		// .coupon-item {
		// 	margin-top: 30rpx;

		// 	.date {
		// 		margin-left: 20rpx;
		// 	}
		// }
		.coupon-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.list-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 47%;
				height: 200rpx;
				font-size: 24rpx;
				text-align: center;
				margin-bottom: 15rpx;
				border-radius: 10rpx;
				background-size: 100% 100%;
				box-sizing: border-box;
				padding: 5rpx 0;

				text {
					margin-left: -20rpx;
				}

				&:not(:nth-child(3n)) {
					margin-right: calc((100vw - 100rpx - 600rpx)/3)
				}
			}

			.list-item-select {
				color: #cc4444;
				border: 1px solid #cc4444;
			}

		}

	}
</style>